<template>
  <div class="base-info">
    <div class="info-title">基础信息</div>
    <el-row :gutter="20">
      <el-col :span="9">
        <div class="info-item">
          <span class="item-label">中文名称: </span>
          <span class="item-value">{{ infoData.nameCN }}{{ infoData.shortNameCN ? '(' + infoData.shortNameCN + ')' : '' }}</span>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="info-item">
          <span class="item-label">英文名称: </span>
          <span class="item-value">{{ infoData.nameEN }}{{ infoData.shortNameEN ? '(' + infoData.shortNameEN + ')' : '' }}</span>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="info-item">
          <span class="item-label">题数: </span>
          <span class="item-value">{{ infoData.questions.length }}/{{ infoData.questionNum }}</span>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="info-item">
          <span class="item-label">维度数: </span>
          <span class="item-value">{{ infoData.demensions.length }}/{{ infoData.demensionNum }}</span>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="info-item">
          <span class="item-label">创建时间: </span>
          <span class="item-value">{{ infoData.createTime }}</span>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="info-item">
          <span class="item-label">量表介绍：</span>
          <span class="item-value">{{ infoData.introduce }}</span>
        </div>
      </el-col>
    </el-row>
  </div>

  <div class="info-tabs">
    <div class="info-title">配置信息</div>
    <el-tabs type="border-card" class="scale-tabs">
      <el-tab-pane label="题目">
        <div class="tab-tools"><el-button @click="handleAddQuestion" :disabled="infoData.questions.length >= infoData.questionNum">添加题目</el-button></div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, i) in infoData.questions" :key="item.idx">
            <question-item :question="item" :isLast="i === infoData.questions.length - 1" @handle-edit="handleEditQuestion" @reLoad="reloadQuestion" />
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="维度">
        <div class="tab-tools"><el-button @click="handleAddDemension">添加维度</el-button></div>
        <demension-item
          v-for="(demension, i) in infoData.demensions"
          :key="demension.id"
          :idx="i"
          :demension="demension"
          :question-num="infoData.questionNum"
          @handle-edit="handelEditDemension"
          @reLoad="reloadDemension"
        />
      </el-tab-pane>
      <el-tab-pane label="报告">
        <div class="tab-tools"><el-button @click="handleEditReport">编辑报告</el-button></div>
        <report-wrap :report-data="reportData" :report-configs="reportConfig" />
      </el-tab-pane>
    </el-tabs>
  </div>

  <question-dialog ref="questionLoger" @reLoad="reloadQuestion" />
  <demension-dialog ref="demensionLoger" @reLoad="reloadDemension" />
</template>

<script setup lang="ts">
  import { Http } from '@/utils/http';
  import { reactive, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { Demension, Question, ScaleInfo, ReportData, ReportConfig } from '../utils/scale.type';

  import questionItem from './components/question-item.vue';
  import questionDialog from './components/question-dialog.vue';
  import demensionItem from './components/demension-item.vue';
  import demensionDialog from './components/demension-dialog.vue';
  import reportWrap from '@/components/report/index.vue';

  import { useMainStore } from '@/store';
  import Message from '@/utils/message';

  const questionLoger = ref();
  const demensionLoger = ref();
  const mainStore = useMainStore();

  const module = 'scale';
  const route = useRoute();
  const infoData = reactive<ScaleInfo>({
    id: 1,
    nameCN: '',
    nameEN: '',
    shortNameCN: '',
    shortNameEN: '',
    questionNum: 0,
    demensionNum: 0,
    introduce: '',
    level: 0,
    type: 0,
    isCommon: false,
    author: '',
    createTime: new Date(),
    questions: [],
    demensions: [],
    isOnline: false,
  });

  const reportData = reactive<ReportData>({
    scaleInfo: {
      id: 1,
      nameCN: '测试',
      nameEN: 'test',
      isCommon: true,
      questionNum: 10,
      demensionNum: 0,
      introduce: '',
      level: 1,
      type: 1,
      author: 'admin',
      createTime: new Date(),
      isOnline: false,
    },
    companyInfo: { companyName: '京东', companyCode: '123', legal: '东哥', legalPhone: '110', legalEmail: '110@163.com', address: '科创十街' },
    userInfo: { username: '张三', password: '', phone: '120', isStudent: false, classify: '', userId: 1 },
    record: [],
    demensions: [],
  });
  const reportConfig = ref<ReportConfig[]>([{ type: 'title-default', config: { title: '华夏弘康测评报告' } }]);

  Http.get<ScaleInfo>(`${module}/info/${route.params.id}`).then((res) => {
    infoData.id = res.id;
    infoData.nameCN = res.nameCN;
    infoData.nameEN = res.nameEN;
    infoData.shortNameCN = res.shortNameCN;
    infoData.shortNameEN = res.shortNameEN;
    infoData.questionNum = res.questionNum;
    infoData.level = res.level;
    infoData.type = res.type;
    infoData.isCommon = res.isCommon;
    infoData.author = res.author;
    infoData.createTime = res.createTime;
    infoData.questions = res.questions;
    infoData.demensions = res.demensions;

    // 保存
    mainStore.$patch({
      currentScale: infoData.id,
    });
  });

  const reloadQuestion = () => {
    Http.post<Question[]>('/question/listById', { id: mainStore.getCurrentScale }).then((res) => {
      infoData.questions = res;
    });
  };
  const reloadDemension = () => {
    Http.post<Demension[]>('demension/listById', { id: mainStore.getCurrentScale }).then((res) => {
      console.log('🚀 ~ file: info.vue ~ line 169 ~ Http.post<Demension[]> ~ res', res);
      infoData.demensions = res;
    });
  };
  const handleAddQuestion = () => {
    const qt: Question = {
      title: '',
      idx: infoData.questions.length + 1,
      choices: infoData.questions[infoData.questions.length - 1]?.choices || ['是', '否'],
    };
    questionLoger.value.open('新建题目', 'new', qt);
  };

  const handleAddDemension = () => {
    console.log('🚀 ~ file: info.vue ~ line 182 ~ handleAddDemension ~ infoData.demensions', infoData.demensions);
    console.log('🚀 ~ file: info.vue ~ line 183 ~ handleAddDemension ~ infoData.questions', infoData.questions);
    demensionLoger.value.open('新建维度', 'new', { questions: infoData.questions, demension: infoData.demensions.length ? infoData.demensions : [] });
  };

  const handleEditQuestion = (qt: Question) => {
    questionLoger.value.open('编辑题目', 'edit', qt);
  };

  const handelEditDemension = (ds: Demension) => {
    demensionLoger.value.open('编辑维度', 'edit', ds);
  };

  const handleEditReport = () => {
    Message.info('您点击了编辑报告！');
  };
</script>

<style lang="scss" scoped>
  .base-info,
  .info-tabs {
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;

    .info-item {
      line-height: 30px;
      font-size: 14px;

      .item-label {
        font-weight: bold;
      }
    }
  }
  .info-title {
    position: relative;

    line-height: 30px;
    padding-left: 14px;

    font-weight: bold;
    text-shadow: 3px 3px 0 #ccc;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;

    &::after {
      position: absolute;
      content: '';
      height: 24px;
      width: 4px;
      background: #666;

      box-shadow: 2px 0px 0 #ccc;

      top: 3px;
      left: 0;
    }
  }
</style>
